<template>
  <div class="create-shops">
    <div class="wlm-form" style="min-height:100vh">
      <!-- <div class="wlm-form-header flex-row flex-justify-b">
        <div class="select-nav flex-row">
          <label>筛选：</label>
          <p><span
              v-for="(item, index) in shopselect"
              :key="index"
              @click="selectChange(index,item.id)"
              v-bind:class="{active:shopCurrent === index}"
            >{{item.title}}</span></p>
        </div>
      </div> -->
      <div class="wlm-form-content">
        <div class="flex-row flex-justify-e">
          <div class="wlm-table-header">
            <el-form :model="tableFormatData.shopTable.files" size="small" label-width="90px" class="retail-form" label-position="right">
              <el-form-item label="">
                <div class="flex-row flex-align-c">
                  <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.shopTable.files.name" placeholder="请输入店铺名称" style="width:200px;">
                    <el-button slot="prepend" icon="el-icon-search" @click="filesSerch"></el-button>
                    <el-button slot="append" icon="el-icon-close" @click="filesEmpty"></el-button>
                  </el-input>
                  <!-- <el-tooltip class="item" effect="dark" content="切换显示模式" placement="top">
                                    <i style="margin-left:20px;" class="el-icon-menu"></i>
                                </el-tooltip> -->
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <section class="shop-list">
          <ul>
            <li class="flex-row flex-justify-b" v-for="(item, index) in tableFormatData.shopTable.tableData" :key="index">
              <div class="shoplist-item-left flex-col flex-justify-c">
                <div class="shop-box flex-row flex-justify-c flex-align-c" @click="logAccountLogin(item)">
                  <img :src="item.logo" alt="" height="70" width="70" style="border-radius:50%;">
                  <el-tooltip class="item" effect="dark" :content="(item.name+'')" placement="top" v-if="item.name.length>7">
                    <div class="shop-name">{{item.name.substring(0,7)}}...</div>
                  </el-tooltip>

                  <div class="shop-name" v-else>{{item.name}}</div>

                  <!-- <div :class="['shop-label',`bg-${filterStatus(item.productId,'bg')}`]">{{filterStatus(item.productId,'status')}}</div> -->
                  <div class="flex-row">
                    <div class="shop-line"></div>
                    <div style="font-size:12px; " class="name">{{item.sitename}}</div>
                    <div class="shop-line"></div>
                  </div>
                  <!-- <div class="bottom-tag flex-row flex-align-c flex-justify-b">
                    <el-tooltip class="item" effect="dark" :content="(item.endtime+'')" placement="bottom" v-if="(item.endtime+'').length>=5">
                      <p>剩余{{(item.endtime+'').substring(0,3)}}...天</p>

                    </el-tooltip>
                     <p v-else>剩余{{item.endtime}}天</p>
                    <div class="bottom-tag-line"></div>
                    <p :class="{'orders-red':item.status == 0||item.status == 3,'orders-blue':item.status==1||item.status==2}">{{shopstatus[item.status]||''}}</p>
                  </div> -->
                  <div class="flex-row flex-align-c flex-justify-b" style=" border-radius: 30px;margin-top: 20px;background: rgb(244, 246, 250);padding: 20px 10px;">
                   
                     <p>剩余{{item.endtime}}天</p>
                    <div style=" height: 10px;margin: 0 4px;width: 1px;background: #ccc;"></div>
                    <p :class="{'orders-red':item.status == 0||item.status == 3,'orders-blue':item.status==1||item.status==2}">{{shopstatus[item.status]||''}}</p>
                  </div>
                  <!-- <div class="shop-time">剩余{{item.endtime}}天</div> -->
                  <!-- <el-tag class="shop-tag">{{shopstatus[item.status]||''}}</el-tag> -->
                </div>
              </div>
            </li>
          </ul>
        </section>
        <!-- <div class="pagination-content flex-row flex-justify-b flex-align-c">
                <el-row class="pagination-btns">
                </el-row>
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.shopTable.pagination.page" :page-sizes="tableFormatData.shopTable.pagination.pagesizes" :page-size.sync="tableFormatData.shopTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.shopTable.pagination.total : 0">
                </el-pagination>
            </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { storeAccountList, logAccount } from '@/api/login'
import { setPath, removeIs_Jurisdiction, removePath } from '@/utils/auth'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'CreateShops',
  components: {

  },
  data() {
    return {
      shopCurrent: 0,
      shopselect: [],
      shopstatus: {
        0: '停业',
        1: '试用中',
        2: '营业中',
        3: '已过期'
      },
      tableFormatData: {
        current: 'shopTable',
        shopTable: {
          key: 'shopTable',
          tableData: [],
          files: {
            productId: '',
            name: ''
          },
          pagination: {
            page: 1,
            list_rows: 9,
            pagesizes: [9, 18, 45],
            total: 9
          }
        }
      }
    }
  },
  computed: {
    hasTableData() {
      return (
        this['tableFormatData']['shopTable']['tableData']
          .length > 0
      )
    }
  },
  created() {
    this.getTypeList()
    this.getTableList()
    removeIs_Jurisdiction()
    removePath()
    this.$store.commit('SET_INEDITION', true)
  },
  methods: {
    filterStatus(data, type) {
      return (type === 'status') ? (data === 1) ? '同城' : '商城' : (type === 'bg') ? (data === 1 ? 'green' : 'yellow') : ''
    },
    logAccountLogin(item) {
      const { store_user_id, wxapp_id } = item
      logAccount({ store_user_id, wxapp_id }).then((res) => {
        console.log('res++++++++++++++++++++++++', res)
        const { data: { jurisdiction, is_super, power, avatar }, msg } = res.data || {}
        // console.log(userData, jurisdiction, 'userData=>response')
        // console.log(is_super, 'is_super=>logAccount')
        const Base64 = require('js-base64').Base64
        const Cookies = require('js-cookie')
        this.$store.commit('SET_AVATAR', avatar)
        // const storeMenu = Cookies.get('STORE_MENU')
        // const storeMenuBase = JSON.parse(Base64.decode(storeMenu))
        // console.log(storeMenuBase, 'storeMenuBasestoreMenuBasestoreMenuBase')
        this.$store.commit('SET_ROLES', [])
        this.$store.commit('SET_ROUTER_PATH', { jurisdiction, is_super: is_super === 0 ? 0 : 1 })
        Cookies.set('STORE_MENU', power)
        console.log(JSON.parse(Base64.decode(power)), 'storeMenuBasestoreMenuBasestoreMenuBase')
        setPath({ jurisdiction, is_super })
        this.$router.replace({ path: '/' }) // 这里继续进行权限操作
        this.$message.success(msg || '登录成功!')
      })
    },

    getFilters() {
      const { page, list_rows } = this['tableFormatData']['shopTable']['pagination']
      const files = this['tableFormatData']['shopTable']['files'] || {}
      return Object.assign(files, { page, list_rows })
    },
    getTypeList() {
      //   userCreate().then((response) => {
      //     const { data: tableData } = response
      //     if (!Object.is(tableData, null)) {
      //       tableData.data.unshift({
      //         detail: '全部',
      //         id: '',
      //         logo: '',
      //         name: '全部',
      //         title: '全部'
      //       })
      //       this.$nextTick(() => {
      //         this['shopselect'] = tableData.data || []
      //       })
      //     }
      //   })
    },
    getTableList() {
      storeAccountList(this.getFilters()).then((response) => {
        const { data: { data: tableData = {} } = {} } = response
        if (Array.isArray(tableData.data)) {
          this['tableFormatData']['shopTable']['tableData'] = tableData.data || []
          this['tableFormatData']['shopTable']['pagination']['total'] = tableData.total || this['tableFormatData']['shopTable']['pagination']['total']
        }
      })
    },
    selectChange(index, id) {
      this.$nextTick(() => {
        this.shopCurrent = index
        this['tableFormatData']['shopTable']['files']['productId'] = id
        this.getTableList()
      })
    },
    listPageChange() {
      // 分页触发后获取数据
      if (this.hasTableData) {
        this.$nextTick(() => {
          this.getTableList()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.create-shops {
  /deep/ .wlm-table-header .el-input-group__prepend {
    background: #ffffff;
    border-right: none;
  }

  /deep/ .wlm-table-header .el-input-group__append {
    background: #ffffff;
    border-left: none;
  }

  .shop-list {
    margin: 0 -20px;

    ul {
      font-size: 0;
      padding: 20px;

      li {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 14%;

        .shop-box {
          // position: relative;
          text-align: center;
          font-size: 14px;

          display: block;
          width: 200px;
          height: 300px;
          overflow: hidden;
          // max-height: 340px;
          // border: 1px solid #f1f1f2;
          background: rgb(237, 240, 246);
          border-radius: 8px;
          margin: 10px auto;
          padding: 30px 25px;

          /deep/ .shop-tag {
            background-color: rgba(64, 158, 255, 0);
          }

          .shop-name {
            // width: 82%;
            word-wrap: break-word;
            word-break: break-all;
            font-size: 18px;
            color: #181616;
            // max-height: 60px;
            overflow-y: hidden;
            margin: 20px auto 10px;
          }
          .bottom-tag {
            border-radius: 30px;
            margin-top: 20px;
            background: rgb(244, 246, 250);
            padding: 10px 14px;
            .bottom-tag-line {
              height: 10px;
              margin: 0 4px;
              width: 1px;
              background: #ccc;
            }
          }
          .shop-line {
            height: 1px;
            width: 30px;
            background: rgb(225, 224, 230);
            margin: 10px;
          }
          .name {
            word-wrap: break-word;
            word-break: break-all;
            font-size: 18px;
            color: #181616;
            max-height: 60px;
            overflow-y: hidden;
          }
          .shop-tag {
            margin-top: 8px;
            // position:absolute;
            // top: 20px;
            // right: 20px;
          }

          &:hover {
            background: rgb(241, 243, 248);
            cursor: pointer;
          }
        }

        .shop-label {
          margin-top: 5px;
          padding: 3px 12px;
          display: inline-block;
          vertical-align: middle;
          border-radius: 2px;
          font-size: 14px;
          color: #fff;

          &.bg-green {
            background-color: #43caae;
          }
        }

        .shop-time {
          margin-top: 10px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .bg-green {
    background-color: #43caae;
  }

  .bg-yellow {
    background-color: #f77a5b;
  }

  .bg-blue {
    background-color: #00acec;
  }

  .select-nav {
    max-width: 1000px;
    color: #181616;
    font-weight: 100;
    line-height: 32px;
    padding: 20px;
    font-weight: normal;
    font-size: 16px;
  }

  .select-nav label {
    color: #181616;
  }

  .select-nav p span {
    padding: 10px 15px;
    color: #666;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .select-nav p span.active {
    border-radius: 2px;
    border: 1px solid #d7d7d4;
    background-color: $content-bg;
  }

  .header-inline {
    display: inline-block;
    padding: 20px 0;
  }

  /deep/ .pagination-content .el-input {
    width: 100px;
  }

  /deep/ .new-create {
    display: block;
    width: 110px;
    height: 40px;
    line-height: 0;
    text-align: center;
    border-radius: 2px;
    color: #fff;
    font-size: 16px;
  }
}
</style>
